<!DOCTYPE html>
<html style="background-color: #F1F4FB">

<head>
	<meta charset="utf-8">
	<title>科研项目统计页面</title>
	<!--公用样式-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/comment.css"/>
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/supplier/common/css/style.css"/>
	<!--extended-->
	<link rel="stylesheet" type="text/css" href="${re.contextPath}/plugin/common/css/extended.css"/>
	<!--Layui-->
	<link rel="stylesheet" href="${re.contextPath}/plugin/layui/css/layui.css" media="all"/>
	<!--公用样式JS-->
	<script type="text/javascript" src="${re.contextPath}/plugin/jquery/jquery-3.2.1.min.js"></script>
	<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/comment.js"></script>
	<script type="text/javascript" src="${re.contextPath}/plugin/layui/layui.js" charset="utf-8"></script>
</head>
<style>
	.Right {
		overflow-y: auto;
		width: 100%;
		left: 16%;
		top: 144px;
	}
	.layui-table-cell {
		text-align: center;
		font-size:14px;
		padding:0 5px;
		height:auto;
		overflow:visible;
		text-overflow:inherit;
		white-space:normal;
		word-break: break-all;
	}

	.tab-name-unselect {
		font-weight: bolder;
		font-size: 18px!important;
		color: #888888;
	}
	.tab-name-select{
		font-weight: bolder;
		font-size: 18px!important;
		color: #1e9fff!important;
		background-color: #ffffff!important;
	}

	.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {
		border-bottom: 2px solid #1e9fff!important;
	}
	.layui-laypage-limits select {
   		width: 70px;
	}
	.layui-table tbody tr:hover , .layui-table-hover , .layui-table-click{
		background-color: rgba(255,255,255,0);
	}
</style>

<body>
<!--头部-->
<!--容器-->
<div class="layui-container" style="background-color: #ffffff;width:96%;margin-top:60px;padding:16px;border-radius: 10px">
	<!--tab页面-->
	<div class="layui-tab layui-tab-brief" lay-filter="demo">
		<ul id="tab-uls" class="layui-tab-title" style="margin: 0px 10px 10px 10px">
			<li class="layui-this tab-name-select">按计划类别</li>
			<li class="tab-name-unselect">按项目级别</li>
			<li class="tab-name-unselect">按项目负责人</li>
			<li class="tab-name-unselect">按人员统计</li>
		</ul>
		<div class="layui-tab-content" style="height: 60px;">
			<div class="layui-tab-item layui-show" style="margin-left: 0px">
				<!--筛选行-->
				<div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
					<div class="layui-row">
						<!--计划类别-->
						<div class="layui-col-md2">
							<span>计划类别:</span>
							<select id="play_type_select">
								<option value="000">全部</option>
								<#list jhlbList as jhlb>
									<option value="${jhlb.badtCode}">${jhlb.badtName}</option>
								</#list>
							</select>
						</div>
						<!--获批时间-->
						<div class="layui-col-md4" style="padding-left:2%">
							<span>获批时间:</span>
							<input id="hp_date_start0" class="layui-input layui-input-inline" type="text" style="width: 32%;" placeholder="开始时间">
							<span>至</span>
							<input id="hp_date_end0" class="layui-input layui-input-inline" type="text"  style="width: 32%;" placeholder="结束时间">
						</div>
						<div class="layui-col-md3">
							<#--				<input class="layui-btn layui-btn-danger layui-btn-sm fr ml10" type="button" value="重置" onclick="resetQuery()">-->
							<input class="layui-btn layui-btn-normal" type="button"  value="筛选" onclick="query()">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-tab-item" style="margin-left: 0px">
				<!--筛选行-->
				<div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
					<div class="layui-row">
						<!--项目级别-->
						<div class="layui-col-md2">
							<span>项目级别:</span>
							<select id="project_level_select">
								<option value="000">全部</option>
								<#list xmjbList as xmjb>
									<option value="${xmjb.badtCode}">${xmjb.badtName}</option>
								</#list>
							</select>
						</div>
						<!--获批时间-->
						<div class="layui-col-md4" style="padding-left:2%">
							<span>获批时间:</span>
							<input id="hp_date_start1" class="layui-input layui-input-inline" type="text" style="width: 32%;" placeholder="开始时间">
							<span>至</span>
							<input id="hp_date_end1" class="layui-input layui-input-inline" type="text"  style="width: 32%;" placeholder="结束时间">
						</div>
						<div class="layui-col-md3">
							<#--				<input class="layui-btn layui-btn-danger layui-btn-sm fr ml10" type="button" value="重置" onclick="resetQuery()">-->
							<input class="layui-btn layui-btn-normal" type="button"  value="筛选" onclick="query()">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-tab-item" style="margin-left: 0px">
				<!--筛选行-->
				<div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
					<div class="layui-row">
						<!--项目负责人-->
						<div class="layui-col-md2" style="padding-left:1%">
							<span>姓名:</span>
							<input id="project_fzr2" class="layui-input layui-input-inline" type="text" placeholder="项目负责人" style="width: 55%">
						</div>
						<!--获批时间-->
						<div class="layui-col-md4" style="padding-left:2%">
							<span>获批时间:</span>
							<input id="hp_date_start2" class="layui-input layui-input-inline" type="text" style="width: 32%;" placeholder="开始时间">
							<span>至</span>
							<input id="hp_date_end2" class="layui-input layui-input-inline" type="text"  style="width: 32%;" placeholder="结束时间">
						</div>
						<div class="layui-col-md3">
							<#--				<input class="layui-btn layui-btn-danger layui-btn-sm fr ml10" type="button" value="重置" onclick="resetQuery()">-->
							<input class="layui-btn layui-btn-normal" type="button"  value="筛选" onclick="query()">
						</div>
					</div>
				</div>
			</div>
			<div class="layui-tab-item" style="margin-left: 0px">
				<!--筛选行-->
				<div style="background-color: #F1F4FB;border-radius: 5px;padding:14px 10px;">
					<div class="layui-row">
						<!--项目负责人-->
						<div class="layui-col-md2" style="padding-left:1%">
							<span>姓名:</span>
							<input id="project_fzr3" class="layui-input layui-input-inline" type="text" placeholder="人员" style="width: 50%">
						</div>
						<!--获批时间-->
						<div class="layui-col-md4" style="padding-left:2%">
							<span>获批时间:</span>
							<input id="hp_date_start3" class="layui-input layui-input-inline" type="text" style="width: 32%;" placeholder="开始时间">
							<span>至</span>
							<input id="hp_date_end3" class="layui-input layui-input-inline" type="text"  style="width: 32%;" placeholder="结束时间">
						</div>
						<div class="layui-col-md3">
<#--							<input class="layui-btn layui-btn-normal fr ml10" type="button"-->
<#--								   style="border-radius:5px;background-color: #FF5722;" value="重置"-->
<#--								   onclick="resetQuery()">-->
							<input class="layui-btn layui-btn-normal" type="button"  value="筛选" onclick="query()">
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
<div class="layui-container" style="background-color: #ffffff;width:96%;margin-top:30px;padding:16px;border-radius: 10px">
	<div class="layui-row">
		<div class="layui-col-md3 layui-col-md-offset9">
			<input class="layui-btn layui-btn-normal layui-btn-sm fr ml10" type="button" value="导出Excel" onclick="exportTable()">
			<input class="layui-btn layui-btn-danger layui-btn-sm fr" type="button" value="预览Excel" onclick="viewTable()">
		</div>
	</div>
	<div class="layui-row">
		<table id="statisticstable" lay-filter="statisticstable">

		</table>
	</div>
</div>


<div style="height: 50px"></div>
<#--	<!--右侧内容&ndash;&gt;-->
<script type="text/javascript" src="${re.contextPath}/plugin/tools/tool.js"></script>
<script type="text/javascript" charset="utf-8" src="${re.contextPath}/plugin/common/js/tabs.js"></script>
<script type="text/javascript" src="${re.contextPath}/pageoffice.js" id="po_js_main"></script>
<script type="text/html" id="index">
		{{d.LAY_INDEX}}
</script>
<script type="text/html" id="count">
	<div>
		<span>{{JSON.stringify(d)}}</span>
		<p class="cursor" style="color: dodgerblue" onclick="seeProjectDetail(this,&apos;{{d.jhlb}}&apos;,&apos;{{d["aYear"]}}&apos;)'>{{d["{{d.aYear}}"]}}</p>
	</div>
</script>
<#--<script type="text/html" id="xmjb">-->
<#--	{{# if(d.flag){ }}-->
<#--	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="update"><i class="layui-icon">&#xe640;</i>编辑</a>-->
<#--	{{# }else{ }}-->
<#--	<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="handle"><i class="layui-icon">&#xe640;</i>办理</a>-->
<#--	{{# } }}-->
<#--</script>-->
<script type="text/javascript">
	var table,tableIns,laydate,form,layer,element;
	var defaultTabInd = 0;
	layui.use(['laydate','table','form','layer','element'], function () {
		laydate = layui.laydate;
		table = layui.table;
		form = layui.form;
		layer = layui.layer;
		element = layui.element;//Tab的切换功能，切换事件监听等，需要依赖element模块
		//执行一个laydate实例
		laydate.render({
			elem: '#hp_date_start0' //获批时间开思
		});
		laydate.render({
			elem: '#hp_date_end0' //获批时间结束
		});
		laydate.render({
			elem: '#hp_date_start1' //获批时间开思
		});
		laydate.render({
			elem: '#hp_date_end1' //获批时间结束
		});
		laydate.render({
			elem: '#hp_date_start2' //获批时间开思
		});
		laydate.render({
			elem: '#hp_date_end2' //获批时间结束
		});
		laydate.render({
			elem: '#hp_date_start3' //获批时间开思
		});
		laydate.render({
			elem: '#hp_date_end3' //获批时间结束
		});


		//一些事件触发
		element.on('tab(demo)', function(data){
			console.log(data);
			if(defaultTabInd == data.index){
				console.log("没事瞎点");
			}else{
				defaultTabInd = data.index;
				$('#tab-uls li').addClass("tab-name-unselect");
				$('#tab-uls li').removeClass("tab-name-select");
				$('#tab-uls li:eq('+data.index+')').removeClass("tab-name-unselect");
				$('#tab-uls li:eq('+data.index+')').addClass("tab-name-select");
				getTableByIndex(data.index);
			}
		});

		getTableByjihualeixing();

	});

	function getTableByIndex(index){
		//根据条件加载表格:
		if(index == 0){
			//按照计划类别统计
			getTableByjihualeixing();
		}else if(index == 1){
			//按照项目级别统计
			getTableByxiangmujibie();
		}else if(index == 2){
			//按照项目负责人统计
			getTableByxiangmufuzeren();
		}else if(index == 3){
			//按照人员统计
			getTableByrenyuan();
		}
	}

	function getSearchData(){
		//计划类别
		var jhlb = $('#play_type_select').val();
		//获批时间:
		var hpshStart = $('#hp_date_start'+defaultTabInd).val();
		var hpshEnd = $('#hp_date_end'+defaultTabInd).val();
		//项目名称
		var projectName = $('#project_name').val();
		//项目级别
		var xmjb = $('#project_level_select').val();
		//项目负责人
		var xmfzr = $('#project_fzr'+defaultTabInd).val();
		//计划(批准)下达单位
		var xdunit = $('#project_allow_unit').val();

		var jsondata = {
			spfF3:jhlb,
			spfF9:hpshStart,
			spfF10:hpshEnd,
			spfF1:projectName,
			spfF2: xmjb,
			spfF12:xmfzr,
			spfF7:xdunit
		};
		return jsondata;
	}

	//根据    计划类型    获取表格数据:
	//表头不定列
	function getTableByjihualeixing(){
		var jsondata = getSearchData();
		console.log('jsondata');
		console.log(jsondata);
		$.ajax({
			url: '/search/decision/form/statistics/tableHead/110007?index=0',
			data: jsondata,
			type: 'get',
			dataType: 'json',
			success: function(res){
				console.log(res);
				if(res.flag && res.data){
					//设置表格:
					//方法级渲染  初始为计划类别统计
					tableIns = table.render({
						id: 'statisticstable',
						elem: '#statisticstable',
						url: '/search/decision/form/statistics/110007?index=0',
						height: "full",
						page: true,
						where: jsondata,
						cols: [res.data],
						done: function (res, currentCount) {

						}
					});
					//工具条事件
					table.on('tool(statisticstable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
						var jsondata = getSearchData();
						console.log(obj);
						console.log(data);
						console.log(layEvent);
						console.log(tr);
						if(layEvent.indexOf('showCountDetail')!= -1){ //查看
							//do somehing
								//计划类别表格:
								console.log("计划类别,点击了表格的数字");
								//年份:
								var theYear = layEvent.substring(layEvent.indexOf("(")+1,layEvent.indexOf(")"));
								console.log('theYear');
								console.log(theYear);
								//点击的数字,如果是0没有必要弹出窗口:
								var count = data[theYear];
								if(count == 0){
									return ;
								}
								//计划类别:
								var spfF3 = data.jhlb;
								jsondata['spfF3'] = spfF3;
								jsondata['fileNames1'] = theYear;
								localStorage.setItem("count-detail-filter",JSON.stringify(jsondata));
								var w = ($(window).width()*0.8);
								var h = ($(window).height()*0.8);
								layer.open({
									type: 2,
									title: false,
									closeBtn: 1,
									shade: 0.8,
									area: [w+'px',h+'px'],
									content: '/search/decision/form/statistics/showCountDetailPage/110007?index='+defaultTabInd,
									success: function(layero, index){

									},
									end: function () {
										localStorage.removeItem("count-detail-filter")
									}
								})
						}
					});
				}
			}
		})
	}

	//根据    项目级别    获取表格数据:
	//表头不定列
	function getTableByxiangmujibie(){
		var jsondata = getSearchData();
		console.log('jsondata');
		console.log(jsondata);
		$.ajax({
			url: '/search/decision/form/statistics/tableHead/110007?index=1',
			data: jsondata,
			type: 'get',
			dataType: 'json',
			success: function(res){
				console.log(res);
				if(res.flag && res.data){
					//设置表格:
					//方法级渲染  初始为计划类别统计
					tableIns = table.render({
						id: 'statisticstable',
						elem: '#statisticstable',
						url: '/search/decision/form/statistics/110007?index=1',
						height: "full",
						page: true,
						where: jsondata,
						cols: [res.data],
						done: function (res, currentCount) {

						}
					});
					//工具条事件
					table.on('tool(statisticstable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
						var jsondata = getSearchData();
						console.log(obj);
						console.log(data);
						console.log(layEvent);
						console.log(tr);
						if(layEvent.indexOf('showCountDetail')!= -1){ //查看
							//do somehing
								//计划类别表格:
								console.log("项目级别,点击了表格的数字");
								//年份:
								var theYear = layEvent.substring(layEvent.indexOf("(")+1,layEvent.indexOf(")"));
								console.log('theYear');
								console.log(theYear);
								//点击的数字,如果是0没有必要弹出窗口:
								var count = data[theYear];
								if(count == 0){
									return ;
								}
								//项目级别:
								var spfF2 = data.xmjb;
								jsondata['spfF2'] = spfF2;
								jsondata['fileNames1'] = theYear;
								localStorage.setItem("count-detail-filter",JSON.stringify(jsondata));
								var w = ($(window).width()*0.8);
								var h = ($(window).height()*0.8);
								layer.open({
									type: 2,
									title: false,
									closeBtn: 1,
									shade: 0.8,
									area: [w+'px',h+'px'],
									content: '/search/decision/form/statistics/showCountDetailPage/110007?index='+defaultTabInd,
									success: function(layero, index){

									},
									end: function () {

									}
								})
						}
					});
				}
			}
		})
	}

	//根据    项目负责人    获取表格数据:
	function getTableByxiangmufuzeren(){
		var jsondata = getSearchData();
			//设置表格:
			//方法级渲染  初始为计划类别统计
			tableIns = table.render({
				id: 'statisticstable',
				elem: '#statisticstable',
				url: '/search/decision/form/statistics/110007?index=2',
				height: "full",
				page: true,
				where: jsondata,
				cols: [[
					{field: 'rownum',title: '序号', width: '12%'},
					{field: 'xmjbCode', title: '项目级别编码', hide: true},
					{field: 'name', title: '姓名', width: '22%'},
					{field: 'totalCount', title: '项目负责人数', width: '22%'},
					{field: 'xmjb', title: '项目级别', width: '22%'},
					{field: 'count', title: '项目个数', width: '22%',event: 'countDetail'},
				]],
				done: function (res, curr, count) {
					merge(res, curr, count);
				}
			});
			//工具条事件
			table.on('tool(statisticstable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
				var data = obj.data; //获得当前行数据
				var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
				var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
				var jsondata = getSearchData();
				console.log(obj);
				console.log(data);
				console.log(layEvent);
				console.log(tr);
				if(layEvent == 'countDetail'){
					//按项目负责人统计
				}
			});
	}

	function merge(res, curr, count) {
		var data = res.data;
		var mergeIndex = 0;//定位需要添加合并属性的行数
		var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
		var columsName = ['name'];//需要合并的列名称
		var columsIndex = [2];//需要合并的列索引值

		for (var k = 0; k < columsName.length; k++) {//这里循环所有要合并的列
			var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行
			for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
				var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列
				var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列
				if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
					console.log(data[i][columsName[k]]);
					console.log(data[i - 1][columsName[k]]);
					mark += 1;
					tdPreArr.each(function () {//相同列的第一列增加rowspan属性
						var prev = $(this).prev();
						var next = $(this).next();
						$(this).prev().prev().attr("rowspan", mark);
						$(this).next().attr("rowspan", mark);
						$(this).attr("rowspan", mark);
					});
					tdCurArr.each(function () {//当前行隐藏
						$(this).prev().prev().css("display", "none");
						$(this).next().css("display", "none");
						$(this).css("display", "none");
					});
				}else {
					mergeIndex = i;
					mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
				}
			}
		}
	}

	//根据    人员统计    获取表格数据:
	function getTableByrenyuan(){
		var jsondata = getSearchData();
		console.log('jsondata');
		console.log(jsondata);
		$.ajax({
			url: '/search/decision/form/statistics/tableHead/110007?index=3',
			data: jsondata,
			type: 'get',
			dataType: 'json',
			success: function(res){
				console.log(res);
				if(res.flag && res.data){
					//设置表格:
					//方法级渲染  初始为计划类别统计
					tableIns = table.render({
						id: 'statisticstable',
						elem: '#statisticstable',
						url: '/search/decision/form/statistics/110007?index=3',
						height: "full",
						page: true,
						where: jsondata,
						cols: [res.data],
						done: function (res, currentCount) {

						}
					});
					//工具条事件
					table.on('tool(statisticstable)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
						var data = obj.data; //获得当前行数据
						var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
						var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
						var jsondata = getSearchData();
						console.log(obj);
						console.log(data);
						console.log(layEvent);
						console.log(tr);
						if(layEvent.indexOf('showCountDetail')!= -1){ //查看
							//do somehing
							//计划类别表格:
							console.log("项目级别,点击了表格的数字");
							//年份:
							var theYear = layEvent.substring(layEvent.indexOf("(")+1,layEvent.indexOf(")"));
							console.log('theYear');
							console.log(theYear);
							//点击的数字,如果是0没有必要弹出窗口:
							var count = data[theYear];
							if(count == 0){
								return ;
							}
							//项目级别:
							var spfF2 = data.xmjb;
							jsondata['spfF2'] = spfF2;
							jsondata['fileNames1'] = theYear;
							localStorage.setItem("count-detail-filter",JSON.stringify(jsondata));
							var w = ($(window).width()*0.8);
							var h = ($(window).height()*0.8);
							layer.open({
								type: 2,
								title: false,
								closeBtn: 1,
								shade: 0.8,
								area: [w+'px',h+'px'],
								content: '/search/decision/form/statistics/showCountDetailPage/110007?index='+defaultTabInd,
								success: function(layero, index){

								},
								end: function () {

								}
							})
						}
					});
				}
			}
		})
	}



	function query() {
		getTableByIndex(defaultTabInd);
	}

	function resetQuery(){
		$('#play_type_select').val('000');
		$('#hp_date_start').val('');
		$('#hp_date_end').val('');
		$('#project_name').val('');
		$('#project_level_select').val('000');
		$('#project_fzr').val('');
		$('#project_allow_unit').val('');
		query();
	}

	function viewTable(){
		var jsondata = getSearchData();
		$.ajax({
			url: '/search/decision/form/statistics/viewTable/110007?index='+defaultTabInd,
			data: jsondata,
			type: 'get',
			dataType: 'json',
			success: function(res){
				if(res.flag){
					if(res.data){
						var w = ($(window).width()*0.8);
						var h = ($(window).height()*0.8);
						POBrowser.openWindowModeless('/sys/office/openwordTemp?ft=1&fid=' + res.data, 'width=1200px;height=800px;', '{}')
					}
				}
			}
		})
	}

	function exportTable(){
		var jhlb = $('#play_type_select').val();
		var hpshStart = $('#hp_date_start'+defaultTabInd).val();
		var hpshEnd = $('#hp_date_end'+defaultTabInd).val();
		var projectName = $('#project_name').val();
		var xmjb = $('#project_level_select').val();
		var xmfzr = $('#project_fzr'+defaultTabInd).val();
		var xdunit = $('#project_allow_unit').val();
		var para = '';
		if(jhlb){
			para = para+'&spfF3='+jhlb;
		}
		if(hpshStart){
			para = para+'&spfF9='+hpshStart;
		}
		if(hpshEnd){
			para = para+'&spfF10='+hpshEnd;
		}
		if(projectName){
			para = para+'&spfF1='+projectName;
		}
		if(xmjb){
			para = para+'&spfF2='+xmjb;
		}
		if(xmfzr){
			para = para+'&spfF12='+xmfzr;
		}
		if(xdunit){
			para = para+'&spfF7='+xdunit;
		}
		//获取全部数据:
		var url= '/search/decision/form/export/statistics/110007?index='+defaultTabInd+para;
		location.href = url;
	}

</script>
</body>

</html>